<template>
  <div class="learn-bg c-pt36">
    <div class="c-flex-row c-aligni-center c-justify-sb c-pl24">
      <div class="c-flex-row c-aligni-center">
        <img :src="$addXossFilter(baseData.headimgurl, require('@/assets/defult_head.png'))" alt="" class="c-ww60 c-hh60 c-brp50">
        <div class="c-fs28 c-fc-xblack c-fw500 c-ml16">{{baseData.nickname}}</div>
      </div>
      <div @click="clickShowWeekly" class="c-fs20 c-fc-white c-translucent-balck30 c-hh48 c-ww150 c-br-tl40 c-br-bl40 c-flex-row c-flex-center">
        <img class="c-ww28 c-hh28 c-mr8" :src="require('../../../assets/i/wap/learnCenter/book.png')" alt="">
        <div>学习报告</div>
      </div>
    </div>
    <div class="c-ph24 c-flex-row c-justify-sb c-mt32">
      <div class="c-ww284 c-hh124 bg-study-day c-ph24 c-pv24">
        <div class="c-fs20 c-fc-white"><span class="c-fs32">{{totalStudyDay}}</span><span class="c-opacity50">天</span></div>
        <div class="c-fs22 c-fc-white c-mt8">累计学习天数</div>
      </div>
      <div class="c-ww284 c-hh124 bg-study-time c-ph24 c-pv24">
        <div class="c-fs20 c-fc-white">
          <span v-if="formateH(studyTime[0]) > 0">
            <span class="c-fs32">{{formateH(studyTime[0])}}</span><span class="c-opacity50">小时</span>
            <span class="c-fs32">{{formateM(studyTime[0])}}</span><span class="c-opacity50">分钟</span>
          </span>
          <span v-else>
            <span class="c-fs32">{{formateMin(studyTime[0])}}</span>分钟
          </span>
        </div>
        <div class="c-fs22 c-fc-white c-mt8">累计学习时长</div>
      </div>
    </div>
    <div v-show="!showSearchBar" class="c-pt26 c-pb20 c-ph24 c-flex-row c-aligni-center c-justify-sb">
      <my-small-tabbar :tabList="tabList" :tabIndex="typeBar" :isScroll="true" @changeTab="changeType"></my-small-tabbar>
      <div class="c-flex-row c-aligni-center" v-if="typeBar == 2">
        <!-- <div class="c-flex-row c-aligni-center c-justify-sb c-fs20 c-fc-xblack c-p" v-if="typeBar == 2">
          <popup-picker :data="typeData" v-model="primaryType" value-text-align="left" class="bg-ed c-ph14 c-pv6 c-br24 c-ww104" @on-change="changeStudyType" @on-show="showPicker" @on-hide="hidePicker"></popup-picker>
          <span class="iconfont c-fs12 c-fc-sgray c-pa" :class="styleChange ? 'p-r14' : 'c-p-r24'">{{isShowType ? "&#xe6ab;" : "&#xe6a9;"}}</span>
        </div> -->
        <div class="c-flex-row c-aligni-center c-p" @click="clickSearchType">
          <!-- <popup-picker :data="typeData" v-model="primaryType" value-text-align="left" class="c-ph14 c-pv6 c-br24 c-pr24" @on-change="changeStudyType" @on-show="showPicker" @on-hide="hidePicker"></popup-picker> -->
          <div class="c-fc-sblack c-fs22">{{prodTypeArr[prodTypeIndex].name}}</div>
          <span class="iconfont c-fs12 c-fc-sgray c-ml12">{{isShowType ? "&#xe604;" : "&#xe601;"}}</span>
        </div>
        <div @click="showSearch" class="iconfont c-fs24 c-fc-sblack c-ml30">&#xe6d6;</div>
      </div>
      <open-modal class="c-pz6" :openModal='showSearchType' @closeModal='showSearchType = false'>
        <!-- <div v-if="showSearchType" @click="showSearchType = false" class="c-pf c-p-t0 c-p-l0 c-pz6 c-maxw640 c-w100 c-h c-translucent-balck50 c-pt68"> -->
        <div class="c-bg-white c-pt40 c-pb12 c-ph24 c-flex-row c-flexw-wrap c-br-tl20 c-br-tr20">
          <div @click="changeStudyType(index)" v-for="(item, index) in prodTypeArr" :key="index" :class="[prodTypeIndex == index ? 'c-fw600 theme-fc theme-bg-10 theme-bd1' : 'c-fw400 c-fc-xblack c-bg-f2', (index + 1) % 4 == 0 ? '' : 'c-mr20']" class="c-fs24 c-ww132 c-hh54 c-br30 c-flex-row c-flex-center c-mb30">{{item.name}}</div>
        </div>
        <!-- </div> -->
      </open-modal>
    </div>
    <new-search-bar class="c-mv10" v-show="showSearchBar" ref="newSearchBar" :searchText="searchText" @search='startSearch' @cancel='cancleSearch'></new-search-bar>
    <div v-if="typeBar == 1">
      <div class="c-pt12 c-ph24">
        <div class="c-bg-white c-ph24 c-pv18 c-fs22 c-fc-xblack c-fw500 c-br16">本周学习时长超过<span class="theme-fc">{{baseData.position}}</span>的用户</div>
        <div class="c-flex-row c-justify-sb c-mt16">
          <div class="c-ww288 c-hh140 c-pv30 c-ph30 c-bg-white c-br12">
            <div class="c-fs22 c-fc-gray">
              <span v-if="formateH(studyTime[3]) > 0">
                <span class="c-fs40 c-fc-xblack">{{formateH(studyTime[3])}}</span>小时
                <span class="c-fs40 c-fc-xblack">{{formateM(studyTime[3])}}</span>分钟
              </span>
              <span v-else>
                <span class="c-fs40 c-fc-xblack">{{formateMin(studyTime[3])}}</span>分钟
              </span>
            </div>
            <div class="c-fs22 c-fc-gray c-mt12">本年学习</div>
          </div>
          <div class="c-ww288 c-hh140 c-pv30 c-ph30 c-bg-white c-br12">
            <div class="c-fs22 c-fc-gray">
              <span v-if="formateH(studyTime[4]) > 0">
                <span class="c-fs40 c-fc-xblack">{{formateH(studyTime[4])}}</span>小时
                <span class="c-fs40 c-fc-xblack">{{formateM(studyTime[4])}}</span>分钟
              </span>
              <span v-else>
                <span class="c-fs40 c-fc-xblack">{{formateMin(studyTime[4])}}</span>分钟
              </span>
            </div>
            <div class="c-fs22 c-fc-gray c-mt12">本月学习</div>
          </div>
        </div>
        <div class="c-flex-row c-justify-sb c-mt16">
          <div class="c-ww288 c-hh140 c-pv30 c-ph30 c-bg-white c-br12">
            <div class="c-fs22 c-fc-gray">
              <span v-if="formateH(studyTime[1]) > 0">
                <span class="c-fs40 c-fc-xblack">{{formateH(studyTime[1])}}</span>小时
                <span class="c-fs40 c-fc-xblack">{{formateM(studyTime[1])}}</span>分钟
              </span>
              <span v-else>
                <span class="c-fs40 c-fc-xblack">{{formateMin(studyTime[1])}}</span>分钟
              </span>
            </div>
            <div class="c-fs22 c-fc-gray c-mt12">本周学习</div>
          </div>
          <div class="c-ww288 c-hh140 c-pv30 c-ph30 c-bg-white c-br12">
            <div class="c-fs22 c-fc-gray">
              <span v-if="formateH(studyTime[2]) > 0">
                <span class="c-fs40 c-fc-xblack">{{formateH(studyTime[2])}}</span>小时
                <span class="c-fs40 c-fc-xblack">{{formateM(studyTime[2])}}</span>分钟
              </span>
              <span v-else>
                <span class="c-fs40 c-fc-xblack">{{formateMin(studyTime[2])}}</span>分钟
              </span>
            </div>
            <div class="c-fs22 c-fc-gray c-mt12">今日学习</div>
          </div>
        </div>
      </div>
      <div class="c-mt16 c-ph24">
        <div v-if="!hasNoItem" class="c-bg-white c-pl40 c-pr24 c-pt32 c-br12">
          <div class="c-flex-row c-aligni-center c-flexw-wrap">
            <div class="c-w33 c-pb30" v-for="(item, index) in moduleData.filter(i => i.show)" :key="index" @click="goList(item.name)" :class="index % 3 == 0 ? '' : 'c-pl40'">
              <div class="c-fs40">{{item.count}}</div>
              <div class="c-pt8 c-fs22 c-fc-gray">{{item.name}}</div>
            </div>
          </div>
        </div>
        <loading-status-tem :noDataText="'暂无内容'" :pt20="true" :noData="hasNoItem"></loading-status-tem>
      </div>
    </div>
    <div v-if="typeBar == 2">
      <div class="c-p c-pz1" v-if="dataInfo">
        <div class="c-p c-pz1 c-ph24">
          <div class="c-p c-bg-white c-mb20 c-br12" v-for="(item,index) in dataInfo" :key="index">
            <div class="c-flex-row c-justify-sb c-ph24 c-pv24" :class="checkTime(item.expireAt) == '0' ? 'c-opacity50' : ''" @click.capture="goDetail(item.prodId,index)">
              <div class="c-ww180 c-hh120 c-text-hidden c-flex-shrink0 c-br12 c-p">
                <img v-lazy="item.prodAvatar || require('../../../assets/defult270.png')" class="c-block c-w100 c-h imgCloseBig c-br10 c-m-0auto" :class="item.prodType != 142 ? 'c-w100':''" />
                <div class="c-pv4 c-fs14 c-ph4 c-fc-white c-translucent-balck50 c-br4 c-pa cTap">{{prodTypeMap[item.prodType]}}</div>
                <div class="c-pa c-p-l0 c-p-b0 c-w100 c-hh36 br-bl12 br-br12">
                  <div class="c-w100 c-h c-opacity50 c-bg-black"></div>
                  <div class="c-fc-white c-fs16 c-pa c-p-t0 c-p-l0 c-w100 c-h"><div class="c-flex-row c-flex-center c-h">学习时长:{{formateSeconds(item.learningTimes)}}</div></div>
                </div>
              </div>
              <div class="c-flex-row c-flex-column c-justify-sb c-pl12 c-flex-grow1 c-w0 c-p">
                <!-- 所有模块 共用prodName 和 有效期 -->
                <div class="c-text-ellipsis1 c-fs24 c-fc-xblack" :class="item.progressRatio == 1 ? 'w75' : ''">{{item.prodName}}</div>
                <div class="c-fs20" :class="checkTime(item.expireAt) == '0' ? 'c-fc-xblack' : 'c-fc-red'" v-if="((item.expireAt != null && checkTime(item.expireAt) != '-1'))">{{checkTime(item.expireAt) == '0' ? '该课程已过期' : (checkTime(item.expireAt)+'后过期')}}</div>
                <!-- 除公开课、 直播间外的模块 -->
                <div class="c-pa c-p-tm8 c-p-r0 fs70 iconfont theme-fc" v-if="item.progressRatio == 1">&#xe856;</div>
                <div v-if="item.prodType != 51 && item.prodType != 115 && item.prodType != 180" class="c-flex-row c-aligni-center">
                  <div class="c-fc-gray c-fs18 c-ws-n">{{item.progressRatio == 0 ? '未开始' : '已学' + (item.progressRatio ? parseInt(item.progressRatio * 100) : 0) + '%'}}</div>
                  <div class="c-hh6 c-p c-text-hidden c-ml16 c-flex-grow1 c-w0">
                    <div class="c-bg-f2 c-br4 c-w100 c-h"></div>
                    <div class="theme-bg c-h c-pa c-p-t0 c-p-l0 c-br4" :style="{width: item.progressRatio * 100 + '%'}"></div>
                  </div>
                </div>
                <!-- 公开课开始时间 多少人学习 公开课(直播)状态 -->
                <div v-if="item.liveStatus == 0 && item.prodType == 51" class="c-fs20 c-fc-gray">直播时间：{{item.liveStartTime}}</div>
                <div class="c-flex-row c-aligni-center" :class="item.prodType == 51 ? 'c-justify-sb' : 'c-justify-end'" v-if="item.prodType == 51 || item.prodType == 180">
                  <div v-if="item.prodType == 51 && (item.liveStatus == 0 || item.liveStatus == 1 || item.liveStatus == 2)" class="c-fs20 c-fc-gray">{{item.livePeople}}人{{item.liveStatus == 0 ? '已报名' : item.liveStatus == 1 ? '正在学习中' : '已学习'}}</div>
                  <div class="c-p c-hh30" :class="item.liveStatus == 0 ? 'c-ww70' : item.liveStatus == 1 ? 'c-ww88' : 'c-ww52'" v-if="((item.prodType == 51|| item.prodType == 180) && item.liveStatus < 4)">
                    <div class="c-w100 c-h c-br4" :class="item.liveStatus == 0 ? 'bg-lgray' : item.liveStatus == 1 ? 'bg-lblue' : 'bg-lorange'"></div>
                    <div class="c-fs18 c-pa c-p-t0 p-l0 c-w100 c-h" :class="item.liveStatus == 0 ? 'fc-gray' : item.liveStatus == 1 ? 'fc-blue' : 'fc-orange'"><div class="c-flex-row c-flex-center c-w100 c-h">{{liveStatusMap[item.liveStatus]}}</div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" :noDataText="'暂无相关记录'"></loading-status-tem>
      </div>
    </div>
    <div class="masker" v-if="isShowMasker">
      <div class="c-flex-row c-flex-center c-p c-h" v-if="showSwiper">
        <div class="c-pa c-p-t48 c-p-l32 c-fs20 c-fc-white iconfont" @click="closeMasker">&#xe8fd;</div>
        <div>
          <div id="spreadImg" class="c-ww500 c-br20">
            <swiper :options="swiperOption" ref="swiperMy">
              <swiper-slide :key="1">
                <img class="c-w100 c-br16" :src="imgArr[0]" />
              </swiper-slide>
              <swiper-slide :key="2">
                <img class="c-w100 c-br16" :src="imgArr[1]" />
              </swiper-slide>
              <swiper-slide :key="3">
                <img class="c-w100 c-br16" :src="imgArr[2]" />
              </swiper-slide>
              <swiper-slide :key="4">
                <img class="c-w100 c-br16" :src="imgArr[3]" />
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <div class="c-pt48 c-textAlign-c c-fc-white c-fs28">长按分享图片</div>
        </div>
      </div>
      <div class="c-w100 canvasBox ph40 fs24 pb40 pt320" v-for="(item, index) in reportData" :key="index" :id="'canvas' + index">
        <div class="canvasContent">
          <div class="br20 c-bg-white ph40">
            <div class="pv40 c-bd-b1 c-flex-row c-aligni-center c-fc-xblack">
              <img :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="" class="ww80 hh80 c-brp50">
              <div class="pl20">
                <div class="c-fw500 fs30 c-text-ellipsis1">{{item.nickname}}</div>
                <div class="pt6 c-fc-gray fs22" v-if="index == 0">数据统计日期：{{item.start | formatStringTime}}</div>
                <div class="pt6 c-fc-gray fs22" v-else-if="index == 1 || index == 2">数据统计日期：{{item.start | formatStringTime}} - {{item.end | formatStringTime}}</div>
                <div class="pt6 c-fc-gray fs22" v-else>数据统计日期：注册至今</div>
              </div>
            </div>
            <div class="c-flex-row c-aligni-center pb40 fs28">
              <div>
                <div class="pt30">累计学习<span class="fs34 ph10 theme-fc">{{formateMin(item.report.duration)}}</span>分钟</div>
                <div class="pt30">学习了<span class="fs34 ph10 theme-fc">{{item.report.p5CplCount}}</span>节课程</div>
                <div class="pt30" v-if="item.report.p51Visit > 0 && (companyAuth.enableLivePrivateClass || (companyAuth.enableTeleviseLive == 1 || companyAuth.enableLivePersonalModule == 1))">参与了<span class="fs34 ph10 theme-fc">{{item.report.p51Visit}}</span>场直播</div>
                <div class="pt30" v-if="item.report.p125CplCount > 0 && companyAuth.enableExamModule">参与了<span class="fs34 ph10 theme-fc">{{item.report.p125CplCount}}</span>次考试</div>
                <div class="pt30" v-if="(item.report.p181Visit > 0 || item.report.p181News > 0) && companyAuth.enableCircleModule">
                  <span v-if="item.report.p181Visit > 0">加入了<span class="fs34 ph10 theme-fc">{{item.report.p181Visit}}</span>个新圈子</span>
                  <span v-if="item.report.p181News > 0">,发布了<span class="fs34 ph10 theme-fc">{{item.report.p181News}}</span>条动态</span>
                </div>
                <div class="pt30" v-if="item.report.p10Visit > 0 && companyAuth.enableSocialGroup">加入了<span class="fs34 ph10 theme-fc">{{item.report.p10Visit}}</span>个社群</div>
                <div class="pt30" v-if="item.report.p41CplCount > 0 && companyAuth.enableSignCardModule">完成了<span class="fs34 ph10 theme-fc">{{item.report.p41CplCount}}</span>次打卡</div>
              </div>
            </div>
          </div>
          <div class="pt30 c-flex-row c-justify-sb c-aligni-center">
            <div class="c-fc-white c-w0 c-flex-grow1">
              <div class="fs32">{{companyAuth.companyName}}</div>
              <div class="pt16 c-opacity70 fs28">我已加入{{totalStudyDay}}天，扫码与我一起学习</div>
            </div>
            <div class="pl10">
              <img :src="$addXossFilter(item.qrcodeUrl, '')" alt="" class="ww162 hh162 br6">
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="companyAuth && companyAuth.companyNav">
      <nav-bottom-bar :itemIndex="43" v-for="(item,index) in companyAuth.companyNav" :key="index" v-if="item.navType == 43"></nav-bottom-bar>
    </template>
  </div>
</template>

<script>
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js";
import { goDetails } from "@/utils/goDetails.js";
// import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
let limit = 10;
let html2canvas = null;
export default {
  name: 'WatchList',
  components: {
    loadingStatusTem,
    MySmallTabbar,
    // PopupPicker,
    swiper,
    swiperSlide,
    NavBottomBar,
    newSearchBar,
    OpenModal
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      isApp: false,
      page: 1,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      userHeadImg: localStorage.getItem("userHeadImg"),
      userName: localStorage.getItem("userName"),
      cfrom: global.ckFrom,
      type: 5,
      type1: 51,
      ckFrom: global.ckFrom.course,
      dataInfo: [],
      dataStatus: 'HAS_MORE_DATA',
      isChoose: true,
      prodType: 0,
      prodTypeMap: {
        0: '全部',
        110: '视频',
        111: '音频',
        112: '图文',
        51: '公开课', //公开课
        115: '小班课', //小班课
        142: '电子书', //电子书
        9: '专栏',
        78: '训练营',
        180: '直播间',
      },
      liveStatusMap: {
        0: '预告',
        1: '正在直播',
        2: '回放',
        3: '结束'
      },
      isShowMore: false,
      isFold: false,
      tabList: [
        {
          title: "学习数据",
          index: 1,
        },
        {
          title: "最近学习",
          index: 2,
        }
      ],
      typeBar: 1,
      primaryType: ['全部'],
      isShowType: false,
      // styleChange: false,
      isLoading: false,
      isShowMasker: false,
      baseData: {},
      studyTime: [],
      timeType: ["累计学习", "本周学习", "今日学习"],
      reportData: [],
      statCounts: {},
      typeData: [['全部', '视频', '音频', '图文', '专栏', '公开课', '小班课', '直播间', '电子书', '训练营']],
      moduleData: [],
      totalStudyDay: 0,
      imgArr: [],
      showSwiper: false,
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          bulletActiveClass: 'c-bg-white'
        },
        loop: true,
        speed: 300,
        autoplay: false,
        autoHeight: true,
        updateOnImagesReady: true,
        observer: true,
        hasNoItem: false
      },
      showSearchBar: false,
      searchText: '',
      showSearchType: false,
      prodTypeIndex: 0,
      prodTypeArr: [{
        prodType: 0,
        name: '全部'
      }, {
        prodType: 110,
        name: '视频'
      }, {
        prodType: 111,
        name: '音频'
      }, {
        prodType: 112,
        name: '图文'
      }, {
        prodType: 51,
        name: '公开课'
      }, {
        prodType: 115,
        name: '小班课'
      }, {
        prodType: 142,
        name: '电子书'
      }, {
        prodType: 9,
        name: '专栏'
      }, {
        prodType: 78,
        name: '训练营'
      }, {
        prodType: 180,
        name: '直播间'
      }],
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
    import("@/utils/html2canvas.js").then(res => {
      html2canvas = res.default;
    })
  },
  filters: {
    formatStringTime(value) {
      if (value != undefined && value != "" && value != null) {
        return value.replace(/-/g, '/').slice(5);
      } else {
        return value;
      }
    },
  },
  computed: {

  },
  watch: {
    $route(to, from) {
      if (from.path == "/member/memberIndex") {
        this.getList();
        this.primaryType = ['全部'];
      }
    }
  },
  methods: {
    clickSearchType() {
      this.showSearchType = true;
    },
    showSearch() {
      this.showSearchBar = true;
      this.$nextTick(() => {
        this.$refs.newSearchBar.searchClick();
      })
    },
    startSearch(e) {
      this.page = 1;
      this.dataInfo = [];
      this.searchText = e.searchValue;
      this.getList();
    },
    cancleSearch(e) {
      this.showSearchBar = false;
      this.page = 1;
      this.dataInfo = [];
      this.searchText = e.searchValue;
      this.getList();
    },
    changeType: function (type) {
      if (this.typeBar != type) {
        this.typeBar = type;
      }
      return false;
    },
    showPicker() {
      this.stopScroll();
    },
    hidePicker() {
      this.canScroll();
    },
    //禁止滚动
    stopScroll() {
      var prevent = function (e) { e.preventDefault(); };
      document.body.style.overflow = 'hidden';
      document.addEventListener('scroll', prevent);//禁止页面滑动
    },
    //取消滑动限制
    canScroll() {
      var prevent = function (e) { e.preventDefault(); };
      document.body.style.overflow = '';//出现滚动条
      document.removeEventListener('scroll', prevent);
    },
    getBaseData() {
      utilJs.getMethod(global.apiurl + "members/myLearningHub/stats", res => {
        this.baseData = res;
        // --------------"累计学习", "本周学习", "今日学习", "本年学习", "本月学习"
        this.studyTime = [res.total, res.week, res.today, res.year, res.month]
        this.getStatCounts();
      })
    },
    //判断课程是否到了有效期的时间
    checkTime(expireAt) {
      if (expireAt == null) {
        return -1;
      }
      let nowTime = (new Date()).getTime();
      let expireTime = utilJs.getTimeByDate(expireAt);
      let eightTime = 691200000; //8天时间的毫秒数
      if (expireTime > nowTime && expireTime - nowTime > eightTime) {
        return "-1"; //代表没过期
      } else {
        if (expireTime <= nowTime) {
          return "0"; //已过期
        } else {
          let time = expireTime - nowTime;
          let timeObj = utilJs.timeTmpToStr(time, true);
          if (timeObj.dayNum != -1) {
            return timeObj.dayNum + '天';
          } else if (timeObj.hourNum != -1) {
            return timeObj.hourNum + '时' + timeObj.minuteNum + '分';
          } else if (timeObj.minuteNum != -1) {
            return timeObj.minuteNum + '分' + timeObj.secondsNum + '秒';
          } else if (timeObj.secondsNum != -1) {
            return timeObj.secondsNum + '秒';
          } else {
            return '';
          }
        }
      }
    },
    //将秒转化为时分秒
    formateSeconds: function (time) {
      let secondTime = parseInt(time);
      let min = 0;
      let h = 0;
      let result = ''
      if (secondTime > 60) {
        min = parseInt(secondTime / 60)
        secondTime = parseInt(secondTime % 60)
        if (min > 60) {
          h = parseInt(min / 60)
          min = parseInt(min % 60)
        }
      }
      result = `${h.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`
      return result
    },
    formateM: function (time) {
      let min = 0;
      min = parseInt(time / 60);
      if (min > 59) {
        min = parseInt(min % 60);
        return min;
      }
      return min;
    },
    formateH: function (time) {
      let min = 0;
      let h = 0;
      min = parseInt(time / 60);
      if (min > 59) {
        h = parseInt(min / 60);
      }
      return h
    },
    formateMin: function (time) {
      let min = 0;
      min = parseInt(time / 60);
      return min;
    },
    goDetail: function (id, index) {
      let prodType = Number(this.dataInfo[index].prodType);
      let courseType = prodType == 111 ? 1 : prodType == 112 ? 2 : 0;
      prodType = this.type == 54 ? global.ckFrom.column : prodType == 110 || prodType == 111 || prodType == 112 ? global.ckFrom.course : prodType;
      let query = {}
      if (this.type == 54) {
        query.distribution = '1';
      }
      goDetails(this, prodType, id, query, courseType);
    },
    //分页获取观看记录
    getList: function () {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + 'members/myLearningHub?page=' + this.page + '&limit=' + limit + '&prodName=' + this.searchText + (this.prodType == 0 ? '' : '&prodType=' + this.prodType), res => {
        if (res.list) {
          if (this.page == 1) {
            this.dataInfo = res.list;
          } else {
            this.dataInfo = [...this.dataInfo, ...res.list];
          };
        }
        if (this.dataInfo && this.page >= Math.ceil(res.total / 10)) {
          this.dataStatus = this.page == 1 && res.list.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          this.page++
        }
      }, failRes => {
        this.dataStatus = 'DATA_ERROR';
      });
    },
    changeStudyType(cIndex) {
      this.prodTypeIndex = cIndex;
      this.prodType = this.prodTypeArr[this.prodTypeIndex].prodType;
      // this.prodType = name == '全部' ? 0 : name == '视频' ? 110 : name == '音频' ? 111 : name == '图文' ? 112 : name == '公开课' ? 51 : name == '小班课' ? 115 : name == '电子书' ? 142 : name == '专栏' ? 9 : name == '训练营' ? 78 : 180;
      // if (val[0].length == 2) {
      //   this.styleChange = false;
      // } else {
      //   this.styleChange = true;
      // }
      this.dataInfo = [];
      this.page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.showSearchType = false;
      this.getList();
    },
    getReport() {
      for (let i = 0; i < 4; i++) {
        utilJs.getMethod(global.apiurl + "members/myLearningHub/report?type=" + (i + 1), res => {
          this.reportData[i] = res;
          this.totalStudyDay = res.report.totalLearningDay;
        })
      }
    },
    getStatCounts() {
      utilJs.getMethod(global.apiurl + "members/myLearningHub/statCounts", res => {
        this.statCounts = res;
        this.moduleData = [
          {
            count: res.myLiveNum,
            name: '直播课程',
            show: this.companyAuth.enableLivePrivateClass || (this.companyAuth.enableTeleviseLive == 1 || this.companyAuth.enableLivePersonalModule == 1),
          },
          {
            count: res.mySignCardNum,
            name: '我的打卡',
            show: this.companyAuth.enableSignCardModule,
          },
          {
            count: res.myPaperNum,
            name: '我的考试',
            show: this.companyAuth.enableExamModule,
          },
          {
            count: res.myPractisesNum,
            name: '我的练习',
            show: this.companyAuth.enableQuestionBankModule,
          },
          {
            count: res.myQuestionNum,
            name: '我的问答',
            show: this.companyAuth.enableQuestionModule,
          },
          {
            count: res.mySocialRoomNum,
            name: '我的社群',
            show: this.companyAuth.enableSocialGroup,
          },
          {
            count: res.myCircleNum,
            name: '我的圈子',
            show: this.companyAuth.enableCircleModule,
          },
          {
            count: res.myActivitiesNum,
            name: '我的活动',
            show: this.companyAuth.enableActivityModule,
          },
           {
            count: res.myDictionaryNum,
            name: '我的词典',
            show: this.companyAuth.enableDictionaryModule,
          },
        ];
        let showArr = this.moduleData.filter(item => {
          return item.show == 1;
        })
        if (showArr && showArr.length > 0) {
          this.hasNoItem = false;
        } else {
          this.hasNoItem = true;
        }
        // this.$nextTick(() => {
        //   if (this.$refs.box.offsetHeight > 240) {
        //     this.isFold = true;
        //     this.isShowMore = true;
        //   }
        // })
      })
    },
    goList(name) {
      if (name == "直播课程") {
        this.$routerGo(this, "push", {
          path: "/member/myLive/myLiveCourse"
        })
      } else if (name == "我的打卡") {
        this.$routerGo(this, "push", {
          path: "/member/myClockIn/myClockInList"
        })
      } else if (name == "我的考试") {
        this.$routerGo(this, "push", {
          path: "/member/myExamination/myExamination"
        })
      } else if (name == "我的练习") {
        this.$routerGo(this, "push", {
          path: "/member/myPractice/myPracticeList"
        })
      } else if (name == "我的问答") {
        this.$routerGo(this, "push", {
          path: "/homePage/qa/myQA"
        })
      } else if (name == "我的社群") {
        this.$routerGo(this, "push", {
          path: "/member/mySocial/mySocialGroup"
        })
      } else if (name == "我的圈子") {
        this.$routerGo(this, "push", {
          path: "/homePage/circle/myCircle"
        })
      } else if (name == "我的活动") {
        this.$routerGo(this, "push", {
          path: "/member/myActivity/myActivity"
        })
      } else {
        this.$routerGo(this, "push", {
          path: "/member/myWord/wordIndex"
        })
      }
    },
    clickShowWeekly() {
      this.isShowMasker = true;
      document.body.style.overflow = 'hidden';
      this.$loading.show({
        text: "生成学习报告中"
      });
      document.ontouchstart = null;
      document.ontuchmove = null;
      document.ontouchend = null;
      this.$nextTick(() => {
        let p0 = this.canvas(0);
        let p1 = this.canvas(1);
        let p2 = this.canvas(2);
        let p3 = this.canvas(3);
        Promise.all([p0, p1, p2, p3]).then(() => {
          console.log('canvasToImage finish')
          this.showSwiper = true;
          setTimeout(() => {
            this.$loading.hide();
          }, 1000);
        })
        // for (let i = 0; i < 4; i++) {
        //   this.canvas(i);
        // }
      });
    },
    canvas(cIndex) {
      return new Promise((resolve, reject) => {
        let domTest = document.getElementById("canvas" + cIndex);
        if (!domTest) {
          return;
        }
        html2canvas(domTest, {
          useCORS: true,
          height: domTest.offsetHeight, // 解决当前页面生成图片出现白边问题
          width: domTest.offsetWidth,
          }).then(canvas => {// eslint-disable-line
            let ctx = canvas.getContext("2d");
            this.canvasToImage(ctx, cIndex);
            resolve();
          });
      })
    },
    canvasToImage(ctx, cIndex) {
      try {
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        this.imgArr[cIndex] = dataURL;
        // document.querySelector("#spreadImg").innerHTML = '';
        // document.querySelector("#spreadImg").innerHTML = '<img src="' + dataURL + '" class="app-save-img c-ww500 c-m-0auto br20" alt>';
        // setTimeout(() => {
        //   this.$loading.hide();
        // }, 1000);
      } catch (err) {
        this.$loading.hide();
      }
    },
    closeMasker() {
      this.isShowMasker = false;
      document.body.style.overflow = '';
    },
    //分享
    wechatShare: function () {
      let hurl = window.location.href.split("#")[0];
      let shareUrl = hurl + "#" + this.$route.path + "?refereeId=" + localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "学习中心", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let hurl = window.location.href.split("#")[0];
      let shareUrl = hurl + "#" + this.$route.path + "?refereeId=" + localStorage.getItem("userId");
      utilJs.appShareTrue("学习中心", "", shareUrl, "");
    },
    //下拉加载更多
    windowScrollFunction: function () {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA') {
          this.getList();
        }
      });
    },
    initData() {
      this.page = 1;
      this.typeBar = 1;
      this.reportData = [];
      this.baseData = {};
      this.studyTime = [];
      this.dataInfo = [];
      this.prodType = 0;
      this.totalStudyDay = 0;
      this.searchText = '';
      this.imgArr = [];
      this.showSwiper = false;
      this.isShowType = false;
      // this.styleChange = false;
      this.dataStatus = 'HAS_MORE_DATA';
      this.showSearchBar = false;
      this.showSearchType = false;
      this.prodTypeIndex = 0;
      this.getList();
    },
  },
  activated() {
    //课程，专栏的观看记录
    setDocumentTitle("学习中心");// eslint-disable-line
    this.isFold = false;
    this.isShowMore = false;
    this.isShowMasker = false;
    this.getReport();
    this.isApp = utilJs.isIOSAppALL() || utilJs.isAndroidApp();
    let scrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
    let clientHeight = document.body.clientHeight && document.documentElement.clientHeight ? Math.min(document.body.clientHeight, document.documentElement.clientHeight) : Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    let scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    if (!((scrollTop + clientHeight < scrollHeight) && this.dataInfo && this.dataInfo.length > 0 && this.page != 1 )) {
      this.initData();
    }
    this.getBaseData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.canScroll();
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.cTap {
  top: 0.15rem;
  left: 0.2rem;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.81);
}
.fs90 {
  font-size: 2.25rem;
}
.p-t32 {
  top: 1rem;
}
.p-l76 {
  left: 2.1rem;
}
.bg-ed {
  background-color: #EDEDED;
}
.vux-cell-box >>> .vux-popup-picker-value {
  color: #333 !important;
}
.p-r14 {
  right: 0.35rem;
}
.width-420rem {
  width: 10.5rem;
}
.bg-eb {
  background: #EBEBEB;
}
.canvasBox {
  width: 750px;
  position: absolute;
  top: -999999px;
  left: -999999px;
  z-index: -9999;
}
#canvas0 {
  background: url("../../../assets/i/wap/learnCenter/day.png") no-repeat;
}
#canvas1 {
  background: url("../../../assets/i/wap/learnCenter/week.png") no-repeat;
}
#canvas2 {
  background: url("../../../assets/i/wap/learnCenter/month.png") no-repeat;
}
#canvas3 {
  background: url("../../../assets/i/wap/learnCenter/studyreoport.png") no-repeat;
}
.fs70 {
  font-size: 1.75rem;
}
.w75 {
  width: 75%;
}
.fc-blue {
  color:#248afd;
}
.bg-lblue {
  background:#e9f0fe;
}
.fc-orange {
  color: #fe9901;
}
.bg-lorange {
  background:#fcedd7;
}
.fc-gray {
  color: #b3b3b3;
}
.bg-lgray {
  background:#f2f2f2;
}
.p-l8 {
  left: 0.2rem;
}
.pt6 {
  padding-top: 6px;
}
.pt16 {
  padding-top: 16px;
}
.pt30 {
  padding-top: 30px;
}
.pt34 {
  padding-top: 34px;
}
.pt40 {
  padding-top: 40px;
}
.pt320 {
  padding-top: 320px !important;
}
.pl10 {
  padding-left: 10px;
}
.pl20 {
  padding-left: 20px;
}
.pb34 {
  padding-bottom: 34px;
}
.pb40 {
  padding-bottom: 40px !important;
}
.ph10 {
  padding: 0 10px;
}
.ph32 {
  padding: 0 32px;
}
.ph40 {
  padding: 0 40px;
}
.pv40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.fs22 {
  font-size: 22px;
}
.fs24 {
  font-size: 24px;
}
.fs26 {
  font-size: 26px;
}
.fs28 {
  font-size: 28px;
}
.fs30 {
  font-size: 30px;
}
.fs32 {
  font-size: 32px;
}
.fs34 {
  font-size: 34px;
}
.mt64 {
  margin-top: 64px;
}
.ww80 {
  width: 80px;
}
.hh80 {
  height: 80px;
}
.ww162 {
  width: 162px;
}
.hh162 {
  height: 162px;
}
.br6 {
  border-radius: 6px;
}
.br20 {
  border-radius: 20px;
}
.br-bl12 {
  border-bottom-left-radius: 0.3rem;
}
.br-br12 {
  border-bottom-right-radius: 0.3rem;
}
.learn-bg {
  background: #F6F7F8 url("../../../assets/i/wap/learnCenter/studybg.png") no-repeat;
  background-size: 100% auto;
}
.bg-study-day {
  background: url("../../../assets/i/wap/learnCenter/studyday.png") no-repeat;
  background-size: 100% 100%;
}
.bg-study-time {
  background: url("../../../assets/i/wap/learnCenter/studyDeruation.png") no-repeat;
  background-size: 100% 100%;
}
.minh350px {
  min-height: 350px;
}
.swiper-pagination-bullets {
  left: 50%;
  transform: translate(-50%);
  bottom: 1px;
}
</style>